<!DoCtYpE hTmL>
<html>
<head>
<style>
*{
    margin:0;
    padding:0;
    font-family:Tahoma, Arial;
}
body{
    height:40px;
    max-height:40px;
    line-height:40px;
    vertical-align:middle;
}
.label{
    float:left;
    margin-right:5px;
}
.titulo{
    float:left;
}
.titulo .tweet{
    font-size:10pt;
    height:30px;
    background:#D8E6F8;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#BBD0EB), to(#D8E6F8));
    border:none;
    border:1px solid #A3BEE4;
    border-radius:5px;
    padding-left:5px;
    outline:none;
    -webkit-transition:opacity linear .3s;
    opacity:.5;
}
.titulo .tweet:hover{
    opacity:.8;
}
.titulo .chars{
    font-size:11pt;
    color:#4F84CC;
    opacity:.5
}
.titulo .status{
    font-size:9pt;
    color:#4F84CC;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    margin-left:3px;
    padding-left:3px;
    border-left:1px solid #82A8DB;
}


.buttons{
    float:right;
}
.buttons button{
    padding: .3em 1em .50em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    border-radius: .5em;
    color: #e8f0de;
	border: solid 1px #538312;
	background: #64991e;
	background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
}
.buttons button:hover {
	text-decoration: none;
    background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));
}
.buttons button:active {
	position: relative;
    background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
	top: 1px;
}
.buttons button:disabled{
    opacity:.2;
    background: -webkit-gradient(linear, left top, left bottom, from(#D8E6F8), to(#BBD0EB));
    color:black;
}
.buttons button:disabled:hover,
.buttons button:disabled:active {
	background: -webkit-gradient(linear, left top, left bottom, from(#D8E6F8), to(#BBD0EB));
	top: 0;
}
.dn{display:none}
</style>
<script>
const Controller = function(){return chrome.extension.getBackgroundPage()}
const Traduz = function(s,e){return Controller().Traduz(s,e)}
const html = function(r){return document.write(r)}
var Count = function()
{
    var ch = document.getElementById('chars');
    var len = Tweet.value.length;
    var n = 140-len;

    if(n<0)
    {
        ch.style.color = 'red';
        Submit.setAttribute('disabled', 'disabled');
    }
    else
    {
        ch.style.color = '#4F84CC';
        Submit.removeAttribute('disabled');
    }

    ch.innerText = n;
}
var Send = function()
{
    Status.innerText = Traduz('sending');
    Submit.setAttribute('disabled', 'disabled');
    Controller().Chrowety.update(Tweet.value, null, 'home', function(OK, tid)
    {
        if(OK)
        {
            Controller().Utils.Notify.Individual(tid, 'home');
            window.close();
        }
        else
        {
            Submit.removeAttribute('disabled');
            Status.innerText = Traduz('error')+', '+Traduz('try_again');
        }
    });
}
var Tweet,
    Submit,
    Status,
    data,
    hash = location.hash;
</script>
</head>
<body>
    <div class="label">
        <script>html(Traduz('Tweet'))</script>
    </div>
    <div class="titulo">
        <input onkeyup="Count()" id="tweet" class="tweet" size="100" autofocus />
        <span id="chars" class="chars">140</span>
        <span id="status" class="status"> </span>
    </div>
    <div class="buttons">
        <button id="pronto" onclick="Send()"><script>html(Traduz('done'))</script></button>
        <button style="opacity:.6" onclick="window.close()"><script>html(Traduz('cancel'))</script></button>
    </div>
    <script>
    Tweet = document.getElementById('tweet');
    Submit = document.getElementById('pronto');
    Status = document.getElementById('status');

    if(hash)
    {
        var h = hash.split('#');
        if(h[1])
        {
            data = unescape(h[1]);
            if(data != "null")
            {
                Tweet.value = data;
            }
        }
    }
    Count();
    </script>
</body>
</html>